<template>
	<el-container class="container">
		<el-header class="top">
			<div class="left">
				<div class="logoicon"></div>
				<span>云教务管理系统</span>
			</div>
			<div class="right">
				<div class="title">{{title}}</div>
				<div class="userInfo">
					<i class="el-icon-user-solid"></i>
					<el-dropdown>
					  <span class="el-dropdown-link">
					    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
					  </span>
					  <template #dropdown>
					    <el-dropdown-menu>
					      <el-dropdown-item>账号信息</el-dropdown-item>
					      <el-dropdown-item>修改密码</el-dropdown-item>
					      <el-dropdown-item @click="exitUser">退出登陆</el-dropdown-item>
					    </el-dropdown-menu>
					  </template>
					</el-dropdown>
				</div>
			</div>
		</el-header>
		<el-container>
			<el-aside class="aside" width="100px">
				
				<div v-for="item,key in navMenu" :key="key">
					<div v-if="item.isN == 1">
						<el-button class="item" :class="item.class"  @click="clickColor(key,item.url)">
							<div class="iconfont" :class="item.icon"></div>
							<div class="name">{{item.name}}</div>
						</el-button>
					</div>
					<div v-if="item.isN == 2">
						<el-popover placement="right" :width="100" trigger="hover" >
							<template #reference>
								<el-button class="item" :class="item.class">
									<div class="iconfont" :class="item.icon"></div>
									<div class="name">{{item.name}}</div>
								</el-button>
							</template>
							<div v-for="i,index in item.urlS" :key="index">
								<el-button style="width: 100%;border: none;text-align: left;margin: 0;" @click="clickColor(key, i.url)">{{i.name}}</el-button>
							</div>
						</el-popover>
					</div>
				</div>
				
			</el-aside>
			
			<el-main style="padding:0;background-color: #f1f2f6;"> <router-view/> </el-main>
				
			
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				navMenu: [  // 样式： 循环有下标， 双向绑定下标  利用：class 再用三元判断来实现切换
					{isN:1, class:'', icon:'icon-index-copy', name:'首页', url:'/index'},
					{isN:1, class:'', icon:'icon-xueyuan', name:'学员管理', url:'/student'},
					{isN:1, class:'', icon:'icon-banji', name:'班级管理', url:'/classMan'},
					{isN:1, class:'', icon:'icon-kecheng', name:'考勤管理', url:'/checkWork'},
					{isN:1, class:'', icon:'icon-icon-calendar-o', name:'课程汇总', url:'/course'},
					{isN:2, class:'', icon:'icon-xuexiao', name:'学校动态', url:'#', urlS:[
						{url: '/dynamic',name: '动态管理'},
						{url: '/wheelImg',name: '轮播图'},
						{url: '/schoolInfo',name: '学校介绍'},
						{url: '/contact',name: '联系方式'},
						{url: '/compus',name: '校区管理'}
					]},
					{isN:2, class:'', icon:'icon-shezhi', name:'其他设置', url:'#', urlS:[
						{url: '/classGod',name: '课程管理'},
						{url: '/classRoomGod',name: '教室管理'},
						{url: '/thecherGod',name: '教师管理'},
						{url: '/userGod',name: '账号管理'}
					]}
				]
			}
		},
		created(){
			this.userInfo();  // 加载用户信息 和操作
		},
		methods:{
			userInfo(){
				// 头部右边获取地址
				let title = window.sessionStorage.getItem('title')
				this.title = title
				
				// 左侧导航点击高亮，并保存
				const navMenuKey = window.sessionStorage.getItem('navMenu');
				if(navMenuKey == null){
					this.navMenu[0].class = 'active';
					window.sessionStorage.setItem('navMenu', 0)
				}else{
					this.navMenu[navMenuKey].class = 'active';
				}
			},
			clickColor(key,url){
				// 关闭
				const navMenuKey = window.sessionStorage.getItem('navMenu');
				if(navMenuKey == null){
					this.navMenu[0].class = '';
				}else{
					this.navMenu[navMenuKey].class = '';
				}
				// 高亮
				this.navMenu[key].class = 'active';
				window.sessionStorage.setItem('navMenu', key)
				// 跳转
				this.$router.push(url);
			},
			exitUser(){
				window.sessionStorage.clear();
				this.$router.push('/login')
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		// overflow: hidden;

		.top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			.left{
				display: flex;
				align-items: center;

				.logoicon {
					width: 60px;
					height: 50px;
					background: url(../assets/admin/logo.png) no-repeat center;
					background-size: 50px;
				}
				
				span{
					font-size: 30px;
				}
			}
			.right{
				display: flex;
				align-items: center;
				.title,.userInfo{
					margin-right: 20px;
				}
			}
		}

		.aside {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			z-index: 1;
			.item{
				width: 85px;
				height: 60px;
				border: none;
				margin: 4px 0 0 8px;
				border-radius: 4px;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				.img{
					width: 23px;
					height: 23px;
					background-color: red;
				}
				.name{
					margin-top: 4px;
					font-size: 12px;
				}
			}
			.active{
				background-color: #eee;
				color: #ff6161;
			}
		}
	
	}
	
	
	@font-face {
	  font-family: "iconfont"; /* Project id 2648483 */
	  src: url('//at.alicdn.com/t/font_2648483_m4nln3egu1a.woff2?t=1625225055661') format('woff2'),
	       url('//at.alicdn.com/t/font_2648483_m4nln3egu1a.woff?t=1625225055661') format('woff'),
	       url('//at.alicdn.com/t/font_2648483_m4nln3egu1a.ttf?t=1625225055661') format('truetype');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 22px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-icon-calendar-o:before {  // 课程汇总
	  content: "\e619";
	}
	
	.icon-xuexiao:before {  // 学校动态
	  content: "\e6b6";
	}
	
	.icon-xueyuan:before {  // 学员管理
	  content: "\e75c";
	}
	
	.icon-banji:before {  // 班级
	  content: "\e66f";
	}
	
	.icon-index-copy:before {  // 首页
	  content: "\e622";
	}
	
	.icon-shezhi:before {  // 其他设置
	  content: "\e629";
	}
	
	.icon-kecheng:before {  // 考勤
	  content: "\e62a";
	}
</style>
<style>
	.el-input--suffix .el-input__inner {
	  border: none !important;
	}
	.el-divider--horizontal{
		margin: 10px 0 !important;
	}
</style>
